<div id="users-contain" class="ui-widget" style="float: left; padding: 30px;"  >
	<table id="users" class="ui-widget ui-widget-content">
<thead>
  <tr class="ui-widget-header ">
    <th>#</th>
    <th>Nome</th>
  </tr>
  </thead>
  <tbody>
<tr><td>1	</td><td>Aline Bergmans da Silva </td>
</tr><tr><td>2	</td><td>Andre Takeshi Ogawa</td>
</tr><tr><td>3	</td><td>Attila Nogueira dos Santos</td> 
</tr><tr><td>4	</td><td>Caio Oliveira Souza </td>
</tr><tr><td>5	</td><td>Denis Martos </td>
</tr><tr><td>6	</td><td>Deyvid Franklin Araújo de Souza</td> 
</tr><tr><td>7	</td><td>Diego Henrique Fonseca Santos</td>
</tr><tr><td>8	</td><td>Diego Santana Sarafim</td>
</tr><tr><td>9	</td><td>Douglas Santos Azambuja</td>
</tr><tr><td>10	</td><td>Edileuza Americo de Araujo </td>
</tr><tr><td>11	</td><td>Eduardo Moreira da Silva </td>
</tr><tr><td>12	</td><td>Enoque Felipe dos Santos Leal </td>
</tr><tr><td>13	</td><td>Estevam Freitas de Lima </td>
</tr><tr><td>14	</td><td>Eudione Pires Santos </td>
</tr><tr><td>15	</td><td>Felype dos Prazeres </td>
</tr><tr><td>16	</td><td>Gisele da Silva Santos</td>
</tr><tr><td>17	</td><td>Jeremias Bezerra Neves </td>
</tr><tr><td>18	</td><td>Kelseyn Christian Santos </td>
</tr><tr><td>19	</td><td>Kenedy Eduardo da Silva </td>
</tr><tr><td>20	</td><td>Leandro Fraga de Oliveira </td>
</tr><tr><td>21	</td><td>Liza Vone de Souza</td>
</tr><tr><td>22	</td><td>Luis Cesar Almeida Santana</td> 
</tr><tr><td>23	</td><td>Marcel Pires Santos </td>
</tr><tr><td>24	</td><td>Marcelo Pinto Albuquerque</td>
</tr><tr><td>25	</td><td>Marcus Tadeu Cerqueira de Moraes</td>
</tr><tr><td>26	</td><td>Mário Jose dos Santos Junior </td>
</tr><tr><td>27	</td><td>Rachell Suntak Meira </td>
</tr><tr><td>28	</td><td>Renata Sabrina Paula Lima Silva</td> 
</tr><tr><td>29	</td><td>Renato Goulart </td>
</tr><tr><td>30	</td><td>Renato Soares da Silva</td>
</tr><tr><td>31	</td><td>Roberto Nadj</td>
</tr><tr><td>32	</td><td>Thiago Lima da Silva</td>
</tr><tr><td>33	</td><td>Wellington Tiago da Silva</td> 
</tr>
</tbody>
</table>

</div>

<style>
	#sortable { list-style-type: none; margin: 0; padding: 0; }
	#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 130px; height: 150px; font-size: 1em; text-align: center; }
	</style>
	<script>
	$(function() {
		$( "#sortable" ).sortable();
		$( "#sortable" ).disableSelection();
	});
</script>

<div class="demo">

<ul id="sortable">
	<li class="ui-state-default">Diário<img src="images/diarioa.png"></li>
	<li class="ui-state-default">Frequência<img src="images/frequenciaa.png"></li>
	<li class="ui-state-default">Histórico<img src="images/historico.png"></li>
	<li class="ui-state-default">Diploma<img src="images/diploma.png"></li>
	<li class="ui-state-default">Carômetro<img src="images/carometroa.png"></li>
	<li class="ui-state-default">Boletim<img src="images/boletim.png"></li>
	<li class="ui-state-default">Atas<img src="images/atasa.png"></li>
</ul>

</div>